<template>
  <el-config-provider namespace="ep">
    <div class="app-shell">
      <app-header @toggle-menu="toggleMenu" />
      <div class="app-shell__body">
        <sidebar-menu
          class="app-shell__sidebar"
          :collapsed="isMenuCollapsed"
          @navigate="closeMenuOnMobile"
        />
        <main class="app-shell__content" :class="{ 'is-collapsed': isMenuCollapsed }">
          <router-view />
        </main>
      </div>
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import AppHeader from '@/components/layout/AppHeader.vue';
import SidebarMenu from '@/components/layout/SidebarMenu.vue';

const isMenuCollapsed = ref(window.innerWidth < 1024);

function toggleMenu() {
  isMenuCollapsed.value = !isMenuCollapsed.value;
}

function closeMenuOnMobile() {
  if (window.innerWidth < 1024) {
    isMenuCollapsed.value = true;
  }
}

onMounted(() => {
  window.addEventListener('resize', () => {
    if (window.innerWidth >= 1024) {
      isMenuCollapsed.value = false;
    }
  });
});
</script>

<style scoped>
.app-shell {
  min-height: 100vh;
  background: var(--superdb-background, #f5f7fa);
}

.app-shell__body {
  display: flex;
  min-height: calc(100vh - 64px);
}

.app-shell__sidebar {
  transition: width 0.2s ease;
}

.app-shell__content {
  flex: 1;
  padding: 24px;
  transition: margin-left 0.2s ease;
  background: #fff;
}

@media screen and (max-width: 1024px) {
  .app-shell__body {
    flex-direction: column;
  }
  .app-shell__sidebar {
    position: sticky;
    top: 64px;
    z-index: 10;
  }
  .app-shell__content {
    padding: 16px;
  }
}
</style>